<template>
  <div id="footer">
    <ul>
      <router-link tag="li" to="/movie">
        <i class="fa fa-film"></i>
        <p>电影</p>
      </router-link>
      <router-link tag="li" to="/cinema">
        <i class="fa fa-square"></i>
        <p>影院</p>
      </router-link>
      <router-link tag="li" to="/mine">
        <i class="fa fa-user-circle"></i>
        <p>我的</p>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: "TabBar",
};
</script>
<style scoped>
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 2px solid #ccc;
}
li {
  display: inline-block;
  width: 33%;
  text-align: center;
}
.router-link-active {
  color: #e54847;
}
</style>